<template>
    <div id="sbStatistics">
        <height-chart :title="title">
            <div id="sbStatistics_echartBOX"></div>
        </height-chart>
    </div>
</template>

<script>
    import heightChart from 'components/content/heightChart/heightChart2'

    import echarts from 'echarts'

    import {getComplainType} from "../../../network/home";
    export default {
        name: "sbStatistics",
        data() {
            return {
                timer:null
            }
        },
        props: {
            title: {
                type: String,
                default: "统计类目"
            }
        },
        components: {
            heightChart
        },

        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('左下关闭')
            }
        },
        methods: {
            setEchart() {
                getComplainType().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data)

                        let myChart = echarts.init(document.getElementById("sbStatistics_echartBOX"));

                        var myColor = [
                            '#72EF71',
                            '#EF7172',
                            '#706FEE',
                            '#EFF070',
                            '#EE6FF0',
                        ];
                        myChart.setOption({
                            legend: {
                                data: ['上月', '本月'],
                                top: 10,
                                right: 10,
                                itemGap: 5,
                                itemWidth: 20,
                                itemHeight: 12,
                                textStyle: {
                                    color: "#00f5ff",
                                    fontSize: 12
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '10%',
                                containLabel: true
                            },
                            color: ["#0260BD", "#02ACBD"],
                            xAxis: {
                                type: 'category',
                                data: res.data.name,
                                nameTextStyle: {
                                    // color:"#fff"
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#5F6066',
                                        width: 1,  //这里是为了突出显示加上的
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#00f5ff'
                                    }
                                }
                            },
                            yAxis: {
                                type: 'value',
                                // data: ['0', '20%', '40%', '60%', '80%','100%'],
                                axisLine: {
                                    lineStyle: {
                                        color: '#5F6066',
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    color: '#00f5ff',

                                }
                            },
                            calculable: true,
                            series: [
                                // {
                                //   name: '上月',
                                //   type: 'bar',
                                //   barWidth:'35',
                                //   barGap: 0,
                                //   data: [20, 60,30,10,2,5]
                                // },
                                {
                                    // name: '本月',
                                    type: 'bar',
                                    barWidth: '35',
                                    barGap: 0,
                                    data: res.data.value,
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true, //开启显示
                                                position: 'top', //在上方显示
                                                textStyle: { //数值样式
                                                    color: 'white',
                                                    fontSize: 12
                                                },
                                            },
                                            color: function (params) {
                                                var num = myColor.length;
                                                return myColor[params.dataIndex]
                                            },
                                            shadowBlur: 4,
                                        }
                                    },
                                }
                            ]
                        });
                    }
                });
            }

        }
    }
</script>

<style scoped>
    #sbStatistics_echartBOX {
        width: 100%;
        height: 404px;
    }
</style>

